<template>
  <div class="clock-container">
    <!-- <flip-item :total="2" :current="timeArr[0]" />
      <flip-item :total="9" :current="timeArr[1]" />
      <div class="colon"></div>
      <flip-item :total="5" :current="timeArr[2]" />
      <flip-item :total="9" :current="timeArr[3]" />
      <div class="colon"></div> -->
    <span>
      {{ timeArr[0] + "" + timeArr[1] }}
      :
      {{ timeArr[2] + "" + timeArr[3] }}
      :
      {{ timeArr[4] + "" + timeArr[5] }}
    </span>

    <!-- <flip-item :total="5" :current="timeArr[4]" />
        <flip-item :total="9" :current="timeArr[5]" /> -->
  </div>
  <!-- <div>{{ formattedDate }}</div> -->
</template>

<script setup>
import FlipItem from "../components/FlipItem.vue";
import { getTimeArr } from "../components/utils";
import { ref, onMounted, onBeforeUnmount } from "vue";

const timeArr = ref(getTimeArr());
let timer;
const formattedDate = ref();

onMounted(() => {
  startTimer();
  getDate();
});

onBeforeUnmount(() => {
  stopTimer();
});

function startTimer() {
  console.log("启动定时器+++++++++++++++++++++++++++++");
  timer = setInterval(() => {
    // timeArr.value = getTimeArr(); // 使用 timeArr.value 更新值
    timeArr.value = getTimeArr();
    // console.log("时间更新为:", timeArr.value);
  }, 1000);
}

function stopTimer() {
  console.log("停止定时器----------------------------");
  clearInterval(timer);
}
const getDate = () => {
  // 获取当前日期和时间
  const now = new Date();
  // 获取年份
  const year = now.getFullYear();
  // 获取月份（注意：月份从0开始，所以需要加1）
  const month = String(now.getMonth() + 1).padStart(2, "0");
  // 获取日期
  const day = String(now.getDate()).padStart(2, "0");
  // 将日期格式化为 YYYY-MM-DD
  formattedDate.value = `${year}年${month}月${day}日`;
};
</script>
<style scoped lang="scss">
.clock-container {
  display: flex;
  align-items: center;
  font-family: "UnidreamLED" !important;
  font-size: 2rem;
  letter-spacing: 1px;
  justify-content: center;
  span {
    width: 140px;
    text-align: center;
  }
}

.colon {
  height: 50px;
  padding: 0 10px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

.colon::after,
.colon::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
}

@font-face {
  font-family: "UnidreamLED";
  src: url("./font/UnidreamLED.ttf") format("truetype");
}
</style>
